import React, {useState, useEffect} from 'react';
import ReactDOM from "react-dom";
import root from '../../index';

// 类式组件的写法
// class Demo extends React.Component {
//
// 	state = {count: 0};
//
// 	myRef = React.createRef();
//
// 	add = () => {
// 		this.timer = this.setState(state => ({
// 			count: state.count + 1
// 		}))
// 	}
//
// 	unmount = () => {
// 		ReactDOM.unmountComponentAtNode(document.getElementById("root"));
// 	}
//
// 	componentDidMount() {
// 		setInterval(() => {
// 			this.setState(state => ({
// 				count: state.count + 1
// 			}))
// 		}, 1000)
// 	}
//
// 	show = () => {
// 		alert(this.myRef.current.value);
// 	}
//
// 	render() {
// 		return (
// 			<div>
// 				<input type="text" ref={this.myRef}/>
// 				<h2>当前求和为 {this.state.count}</h2>
// 				<button onClick={this.add}>点我+1</button>
// 				<button onClick={this.unmount}>卸载组件</button>
// 				<button onClick={this.show}>显示输入</button>
// 			</div>
// 		)
// 	}
// }


function Demo() {
	const [count, setCount] = useState(0);
	const [name, setName] = useState("tom");
	const myRef = React.useRef();

	// React.useEffect(() => {
	// 	console.log("@@")
	// }, [])

	// 第二个参数传空数组, 相当于 componentDidMount 生命周期钩子
	useEffect(() => {
		let timer = setInterval(() => {
			console.log("执行定时器..");
			setCount(count => count + 1);
		}, 1000);
		// 返回的函数相当于 componentWillUnmount() 生命周期钩子
		return () => {
			console.log("清空定时器.")
			clearInterval(timer);
		}
	}, []);

	// useEffect(() => {
	// 	console.log("@");
	// }, [count, name]);


	function add() {
		setCount((count) => {
			return count + 1;
		})
	}

	function change() {
		setName("jack");
	}

	function unmount() {
		root.unmount();
	}

	function show() {
		alert(myRef.current.value);
	}

	return (
		<div>
			<input type="text" ref={myRef} />
			<h1>当前求和为 {count}, 名字是 {name}</h1>
			<button onClick={add}>点我+1</button>
			<button onClick={change}>点我改名</button>
			<button onClick={unmount}>卸载组件</button>
			<button onClick={show}>显示数据</button>
		</div>
	)

}

export default Demo;


